<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>一键生成九宫格</title>
    <head th:include="/base::base"><title></title></head>
</head>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<body>

<div id="app">
    <div style="margin: 20px 0 0 30%;">
        <h2>一键生成九宫格</h2>
        <br/>
        <el-upload
                class="avatar-uploader"
                action="/imgUpload/"
                :show-file-list="false"
                :on-success="onSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <br/>
        <template v-if="imgCutList.length > 0" v-for="(item,index) in imgCutList">
            <img :src="item"> <br v-if="(index +1) % 3 == 0"/>
        </template>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                fileList: [],
                imageUrl: "",
                imgCutList: []
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            onSuccess(response, file, fileList) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.getImgList(response)
            },
            getImgList(uuid) {
                this.imgCutList = []
                axios.get(`/getImgList/${uuid}`).then(res => {
                    if (res != null) {
                        res.forEach(item => {
                            this.imgCutList.push('http://localhost:8080/' + uuid + '/' + item);
                        })
                    }
                })
            }
        }
    })
</script>
</body>
</html>